import React, {useEffect, useState} from 'react';
import {ImageBackground} from 'react-native';
import {observer} from 'mobx-react';
import LinearGradinet from 'react-native-linear-gradient';
import Focusable from './Focusable';

import TitleAndDesc from './TitleAndDes';
import {useGlobal} from '../hooks/useStores';
import useWidth from '../hooks/useWidth';
import {Navigation} from 'react-native-navigation';
const mylike_icon = require('../assets/mylike.png');

const MyLikeButton: React.FC<{componentId: string}> = observer(
  ({componentId}) => {
    const [bg, setBg] = useState('');
    const {logined, myplaylist, loadMyPlaylist} = useGlobal();
    const {w4} = useWidth();

    useEffect(() => {
      loadMyPlaylist();
    }, [logined, loadMyPlaylist]);

    useEffect(() => {
      if (myplaylist && myplaylist.length > 0) {
        setBg(myplaylist[0]?.coverImgUrl);
      } else {
        setBg('');
      }
    }, [myplaylist]);

    return (
      <Focusable
        style={{
          width: w4,
          height: w4,
        }}
        onPress={() => {
          if (logined) {
            if (myplaylist.length > 0) {
              Navigation.push<{detail: any}>(componentId, {
                component: {
                  name: 'Playlist',
                  passProps: {
                    detail: myplaylist[0],
                  },
                },
              });
            } else {
              global.showToast({
                title: '您还没有喜欢的歌曲',
                icon: 'none',
              });
            }
          } else {
            global.showToast({
              title: '请先登录',
              icon: 'none',
            });
          }
        }}
        radius={10}
        ani>
        {bg ? (
          <ImageBackground
            source={{
              uri: `${bg}?param=${w4}y${w4}`,
            }}
            style={{
              width: '100%',
              height: '100%',
            }}
            resizeMode="cover">
            <TitleAndDesc
              title="我喜欢的"
              desc="我喜欢的音乐"
              icon={mylike_icon}
            />
          </ImageBackground>
        ) : (
          <LinearGradinet
            style={{width: '100%', height: '100%'}}
            start={{x: 1, y: 1}}
            end={{x: 0, y: 0}}
            colors={['#cacaca', '#ececec']}>
            <TitleAndDesc
              title="我喜欢的"
              desc="【点击查看详情】"
              icon={mylike_icon}
            />
          </LinearGradinet>
        )}
      </Focusable>
    );
  },
);

export default MyLikeButton;
